<template>
    <div>
        <Teleport to="#after-navigation" v-if="targetExists">
            <ForumManager />
        </Teleport>

        <h2>{{ $t('router_tit.notification') }}</h2>
        <div class="notices-wrap">
            <div class="notices-left">
                <ul v-if="dataList.length > 0" v-loading="listLoading">
                    <li v-for="(item, index) in dataList" :key="item.id" :class="item.id == activeItemId ? 'active' : ''" @click="clickDetailAction(item.id)">
                        <h3>{{ item.content }}</h3>
                        <div>
                            <p>{{ formatLoginTime(item.created_at) }}</p>
                            <el-button size="small" type="text" style="color: red" @click.stop="deleteAction(item.id)">{{ $t('header.tools.notify.delete_txt') }}</el-button>
                        </div>
                    </li>
                    <div class="pagination-box">
                        <el-pagination
                            size="small"
                            background
                            v-model:page-size="pagination.limit"
                            v-model:current-page="pagination.page"
                            layout="prev, pager, next"
                            :total="pagination.total"
                            :page-sizes="[10, 20, 50, 100]"
                            :pager-count="6"
                            class="mt-4"
                            :hide-on-single-page="true"
                            @size-change="getNoticesList"
                            @current-change="getNoticesList"
                        />
                    </div>
                </ul>
                <p v-else class="no-data-list-tips">{{ $t('header.tools.notify.no_data_txt') }}</p>
            </div>
            <div class="notices-right">
                <div v-if="detailData?.content" v-loading="detailLoading">
                    <h3>{{detailData.content}}</h3>
                    <p>{{ formatLoginTime(detailData.created_at) }}</p>
                </div>
                <p v-else class="no-data-list-tips">{{ $t('header.tools.notify.detail_tips_txt') }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ForumManager from '@/components/ForumManager.vue'
import { computed, onMounted, ref, watch } from 'vue'
const targetExists = ref(false)
import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
import { formatLoginTime } from '@/utils/global'
import type { noticesItem } from '@/types/user'
import CourseService from '@/api/course'
import type { Pagination } from '@/types/global'
// 分页器
const pagination = ref<Pagination>({
    page: 1,
    limit: 10,
    total: 10,
})
// 获取全部通知列表
const listLoading = ref(false)
const dataList = ref<noticesItem[]>([])

const getNoticesList = () => {
    listLoading.value = true
    const searchData = {
        page: pagination.value.page,
        limit: pagination.value.limit,
    }
    CourseService.getNoticesList(searchData)
        .then(res => {
            dataList.value = res.dataList || []
            pagination.value = res.pagination || pagination.value
        })
        .finally(() => {
            listLoading.value = false
        })
}

// 点击查看详情
const activeItemId = ref()
const clickDetailAction = (id: number) => {
    activeItemId.value = id
    getNoticesDetail(id)
}


// 获取通知详情
const detailLoading = ref(false)
const detailData = ref<noticesItem>()
const getNoticesDetail = (id: number) => {
    detailLoading.value = true
    CourseService.getNoticesDetail(id)
        .then(res => {
            detailData.value = res
            if(res.status == 1){
                readAction(id)
            }
        })
        .finally(() => {
            detailLoading.value = false
        })
}

// 标记为已读
const readAction = (id: number) => {
    CourseService.putNoticesRead(id).then(() => {
        
    })
}

import { ElMessage, ElMessageBox } from 'element-plus'
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
// 删除通知
const deleteAction = (id: number) => {
    ElMessageBox.confirm(t('header.tools.notify.delete_tips'), t('header.tools.notify.tip_txt'), {
        confirmButtonText: t('golbal.btn_text_4'),
        cancelButtonText: t('golbal.btn_text_3'),
        type: 'warning',
    })
        .then(() => {
            CourseService.deleteNotices(id)
                .then(res => {
                    getNoticesList()
                })
                .finally(() => {
                    
                })
        })
        .catch(() => {})
}
import { useRoute } from 'vue-router'
const route = useRoute()
const noticesId = ref()

watch(
  () => route.query.id,
  (newId, oldId) => {
    if(route.query.id){
        console.log('ID 变化:', newId);
        // 重新加载数据
        getNoticesDetail(Number(newId))
    }
    
    
  },
  { immediate: true } // 初始渲染时立即执行一次
);

onMounted(() => {
    // console.log('query', id.value)
    targetExists.value = !!document.querySelector('#after-navigation')
    getNoticesList()
})
</script>

<style lang="less" scoped>
.pagination-box {
    justify-content: center;
}
.notices-wrap {
    width: 100%;
    height: 600px;
    border-radius: 3px;
    border: 1px solid #e3e3e3;
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-top: 20px;
    .notices-left,
    .notices-right {
        height: 100%;
        overflow-y: auto;
    }
    .notices-left {
        border-right: 1px solid #e3e3e3;
        box-sizing: border-box;
        ul {
            padding: 10px 0;
            li {
                padding: 10px 10px 0;
                cursor: pointer;
                h3 {
                    font-size: 16px;
                    color: #000;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                div {
                    display: flex;
                    justify-content: space-between;
                    align-content: center;
                    margin-top: 5px;
                    border-bottom: 1px solid #e3e3e3;
                    padding-bottom: 10px;
                    p {
                        font-size: 12px;
                        line-height: 2;
                    }
                }
            }
            .active {
                background-color: #f1f1f1;
            }
        }
    }
    .notices-right {
        box-sizing: border-box;
        padding: 15px;
        div {
            h3 {
                font-size: 16px;
                line-height: 1.4;
            }
            p {
                font-size: 12px;
                text-align: right;
                margin-top: 20px;
            }
        }
    }
}
.no-data-list-tips {
    text-align: center;
    padding-top: 50px;
    color: #4c4c4c;
    font-size: 14px;
}
</style>
